import React, { useState, useEffect } from 'react'
import { Button, Table, Radio, Breadcrumb, Modal, Input, Tabs, Select, DatePicker, Space, Row, Col } from "antd"
import { Link } from 'react-router-dom'
import { CloudUploadOutlined, PrinterOutlined, SearchOutlined } from '@ant-design/icons';
import style from './index.module.scss'


const { TabPane } = Tabs;
const { Option } = Select
const { RangePicker } = DatePicker;
export default function BankIncome() {
    //分页
    const [pageAndSize, setPageAndSize] = useState({
        currentPage: 1,
        pageSize: 10
    })
    const [dataS, setDataS] = useState([])
    const columns = [
        {
            title: '日期',
            dataIndex: 'Income_num',
        },
        {
            title: '凭证号',
            dataIndex: 'Income_name',
        },
        {
            title: '摘要',
            dataIndex: 'bank_name',
        },
        {
            title: '转出/转入',
            dataIndex: 'bank_customer',
        },
        {
            title: '借方发生额',
            dataIndex: 'income_type',
        },
        {
            title: '货方发生额',
            dataIndex: 'money_type',
        },
        {
            title: '发生账户',
            dataIndex: 'income',
        },
        {
            title: '账户户名',
            dataIndex: 'outcome',
        },
        {
            title: '备注',
            dataIndex: 'update_time',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record) => (
                <>
                    <Link to={{ pathname: '/home/bankMoneyInEdit', record: record }}>编辑</Link>
                    <br></br>
                    <Link onClick={showModal}>删除</Link>
                </>
            )
        },
    ];

    const columns1 = [
        {
            title: '摘要名称',
            dataIndex: 'zhaiyao_mange',
        },
        {
            title: '备注',
            dataIndex: 'money_feedback',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: () => <Link onClick={showModalEdit}>编辑</Link>
        },
    ]

    const data = [];
    useEffect(() => {
        for (let i = 0; i < 8; i++) {
            data.push({
                key: i,
                Income_num: '2021/01/01',
                Income_name: `0 ${i}`,
                bank_name: '本息还款',
                bank_customer: '转入',
                income_type: 12476889,
                money_type: 0.00,
                income: Math.random(),
                outcome: '深圳市贷款有限公司',
                update_time: '',
            });
        }
        setDataS(data)
    }, [])

    const data1 = [];
    for (let j = 0; j < 4; j++) {
        data1.push({
            zhaiyao_mange: '货款发送',
            money_feedback: "",
        })
    }
    //获取分页
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setPageAndSize({
            currentPage: page,
            pageSize
        })
    }
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModal, setisModal] = useState(false)
    const [isModalEdit, setisModalEdit] = useState(false)
    const [isModalAdd, setisModalAdd] = useState(false)

    // 删除弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        dataS.splice(0, 1)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 分类摘要
    const showModals = () => {
        setisModal(true);
    };

    const handleOks = () => {
        setisModal(false);
    };

    const handleCancels = () => {
        setisModal(false);
    };

    // 摘要编辑
    const showModalEdit = () => {
        setisModalEdit(true);
    };

    const handleOkEdit = () => {
        setisModalEdit(false);
    };

    const handleCancelEdit = () => {
        setisModalEdit(false);
    };

    // 摘要增加
    const showModalAdd = () => {
        setisModalAdd(true);
    };

    const handleOkAdd = () => {
        setisModalAdd(false);
    };

    const handleCancelAdd = () => {
        setisModalAdd(false);
    };


    return (
        <div>
            <Modal title="删除确定" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask maskClosable>
                <p>确认要删除该条数据吗？</p>
            </Modal>
            <Modal title="摘要管理" visible={isModal} onOk={handleOks} onCancel={handleCancels} mask maskClosable okText='保存'>
                <Button onClick={showModalAdd}>添加</Button>
                <Table columns={columns1} dataSource={data1} pagination={{
                    total: data1.length,
                    defaultPageSize: 5,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    pageSizeOptions: ['5', '10'],
                    showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                    onChange: getPage
                }}
                />
            </Modal>

            <Modal title="摘要编辑" visible={isModalEdit} onOk={handleOkEdit} onCancel={handleCancelEdit} mask maskClosable okText='保存'>
                <Input placeholder='摘要名称' />
                <Input placeholder='备注' />
            </Modal>

            <Modal title="摘要添加" visible={isModalAdd} onOk={handleOkAdd} onCancel={handleCancelAdd} mask maskClosable okText='保存'>
                <Input placeholder='摘要名称' />
                <Input placeholder='备注' />
            </Modal>


            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>财务管理</Breadcrumb.Item>
                {/* <Breadcrumb.Item>银行账户管理</Breadcrumb.Item> */}
                <Breadcrumb.Item>银行流水录入</Breadcrumb.Item>
            </Breadcrumb>

            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={3}>
                    <Select
                        allowClear
                        placeholder="对方账号"
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        <Option value="4335435435">4335435435</Option>
                    </Select>
                </Col>
                <Col className="gutter-row" span={3}>
                    <div>
                        <Input placeholder="借方账号" allowClear />
                    </div>
                </Col>
                <Col className="gutter-row" span={3}>
                    <div>
                        <Select
                            allowClear
                            placeholder="摘要"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="本息还款">本息还款</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
            <div className={style.pre_title}>
                <p>数据列表</p>
                <div>
                    <Button onClick={showModals}>摘要分类管理</Button>
                    <Button><Link to='/home/bankMoneyInAdd'>录入</Link></Button>
                    <Radio.Button value="large" > <PrinterOutlined /> 打印</Radio.Button>
                    <Button><CloudUploadOutlined className="icon" />导出</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={dataS} pagination={{
                total: dataS.length,
                defaultPageSize: 5,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                onChange: getPage
            }}
            />
        </div>
    )
}
